<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-button v-show="!judgeStatus" type="primary" size="mini" @click="addService">选择产品</el-button>
    </div>
    <span class="tariffList">已关联的产品</span>
    <div class="app-table">
      <el-table :data="productList" border style="width: 100%">
        <el-table-column label="产品ID">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.productId"
              :content="scope.row.productId"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.productId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品名称">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.name"
              :content="scope.row.name"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="关联服务名称">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.serviceName"
              :content="scope.row.serviceName"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.serviceName }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品创建日期">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.createTime"
              :content="scope.row.createTime"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.createTime }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品类别">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.type"
              :content="scope.row.type"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.type }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <div v-show="!judgeStatus">
              <el-button
                type="primary"
                plain
                round
                size="mini"
                icon="el-icon-third-tongyong"
                @click="watchDetail(scope)"
              >查看详细</el-button>
              <el-button
                type="danger"
                plain
                round
                size="mini"
                icon="el-icon-third-tongyong"
                @click="cancelServiceConnect(scope.$index)"
              >取消关联</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getSelectS } from '@/api/product.js'
export default {
  props: {
    productListnew: {
      type: Array,
      default: () => []
    },
    judgeStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      productList: [],
      typeArr: []
    }
  },
  watch: {
    productListnew(val) {
      this.getSelectss(val)
    }
  },
  methods: {
    getSelectss(val) {
      var data = {
        functionType: 'productType'
      }
      getSelectS(data).then((res) => {
        this.typeArr = res.data.list
        this.typeArr.forEach((item) => {
          if (val.length > 0) {
            val.forEach((alin) => {
              if (item.typeId === alin.type) {
                alin.type = item.typeName
              }
            })
          }
        })
        this.productList = val
      })
    },
    // 查看详情
    watchDetail(scope) {
      this.$emit('watchDetail', scope)
    },
    cancelServiceConnect(index) {
      this.$confirm('确认取消关联吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.productList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '取消成功!'
          })
        })
        .catch(() => {
          console.log('取消')
        })
    },
    addService() {
      this.$emit('openProduct', this.productList)
    }
  }
}
</script>
<style>
.tariffList {
  margin: 5px 0 19px 0;
  font-weight: bold;
}
.app-table {
  margin-bottom: 50px;
}
</style>
